<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/goods/goods_list.css" />

		<!-- <link rel="stylesheet" type="text/css" href="../css/goods/confirm_order.css" /> -->
		<link rel="stylesheet" href="../css/mui.picker.min.css">
		<script type="text/javascript">
            (function () {
                var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
                clientWidth = clientWidth || localStorage.getItem("clientWidth")
                if (clientWidth > 750)
                    clientWidth = 750;
                document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
            })();
		</script>
		<style>
			html,
			body,
			.mui-content {
                overflow: hidden;
			}

			.ptsp_top_stats {
				/*height: 20px;*/
				/*width: 100%;*/
				/*background-color: #ffffff;*/
				/*position: fixed;*/
				/*top: 0;*/
				/*left: 0;*/
				/*z-index: 10000;*/
			}

			.mui-action-back {
				height: 44px;
				width: 44px;
			}

			.mui-action-back img {
				width: 100%;
			}


			.arr_left {
				background-image: url(../images/ptsp/left_arr_03.png);
				background-size: 24px 24px;
				background-position: center;
				background-repeat: no-repeat;
			}

			.mui-title {
				font-size: 0.768rem;
			}

			.mui-bar-nav a {
				font-size: 0.5973rem;
				color: #888888;
				line-height: 44px;
			}

            body,
            html,
            .mui-content {
                padding-top: 0;
                margin-top: 0;
            }

            .pullrefresh {
                /*position: relative;*/
                /*z-index: 9999;*/
                /*width: 100%;*/
            }

            .item{
                /*background: #f90;*/
                /*position: relative;*/
                /*z-index: 9999;*/
            }

            .mui-pull-top-pocket {
                /*top: 0px;*/
            }

            .mui-bar-nav ~ .mui-content {
            }

            .mui-bar {
                top: 0;
            }
		</style>
	</head>

	<body>

		<div id="app">

            <header class="mui-bar mui-bar-nav" style="z-index: 10000;">
                <a class="mui-action-back mui-icon  mui-pull-left" onclick="mui.back()">
                    <img src="../images/ptsp/left_arr_03.png" alt="">
                </a>
                <h1 class="mui-title">
                    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">

                        <div class="mui-scroll top_nav">
                            <span :class="menuItem.checked == true ? 'ptsp_active':''" v-for="(menuItem,index) in menusGroup" v-html="menuItem.name" @click="tapItem(menuItem.ptid,menuItem.tid)"></span>
                        </div>
                    </div>

                </h1>
            </header>

            <div id="pullrefresh" style="position: relative; top: 44px;" class="mui-scroll-wrapper pullrefresh">
                <div class="mui-scroll">
                    <!--数据列表-->
                    <div class="mui-content">
                        <div class="goods_list">
                            <div class="item" v-for="wareItem in wareGroup" >
                                <a :href="'goods_detail.html?goodsid=' + wareItem.goodsid">
                                <img :src="wareItem.pic" alt="">
                                <div class="title" v-html="wareItem.name"></div>
                                <div class="price">
                                    <span v-html="'￥'+wareItem.min_price+'元'"></span>
                                    <!--<i>
                                        <img src="../images/ptsp/car_03.png" alt="">
                                    </i>-->
                                </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/host.config.js"></script>
		<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var address = Storage.get('address');
			var sqid = address.sqid
            $('.pullrefresh').css({
                height: $(window).height() - $('.mui-bar-nav').height() + 'px',
                top: $('.mui-bar-nav').height() + 10 + 'px'
            })

			var tab = new Vue({
				el: '#app',
				data: {
                    menusGroup: {}, // 菜单
                    wareGroup:{},   //商品
				},
				methods: {
					tapItem: function(ptid,tid) {
                        // 更新当前选中的菜单项
                        var menusGroup = tab.menusGroup;
                        for (menuItem in menusGroup) {
                            var item = menusGroup[menuItem];
                            if (item.ptid == ptid) {
                                item.checked = true;
                            } else {
                                item.checked = false;
                            }
                        }
                        $.post(url + 'api/goods/lists', {bid: sqid,tid:tid ,ptid:ptid}, function (response) {
                            var responseData = JSON.parse(response);
                            if (responseData.code == '1') {
                                var menus = responseData.data.goods;
                                tab.wareGroup = menus;
                            }
                        });
					},
                    get_data: function (url, cb) {
                        mui.ajax(host_config.host + url, {
                            dataType: 'json', //服务器返回json格式数据
                            type: 'get', //HTTP请求类型
                            timeout: 10000, //超时时间设置为10秒；

                            success: function (res) {
                                //服务器返回响应，根据响应结果，分析是否登录成功；
                                console.log(res);
                                if (res.code == 200) {
                                    cb(res)
                                }
                            },
                            error: function (xhr, type, errorThrown) {
                                //异常处理；
                                console.log(type);
                            }
                        });
                    },
                    get_more_data: function () {
                        var that = this;
                        //如果has_more_data为true 则请求下一页数据。
                        if (this.has_more_data) {
                            this.get_data('/sim_data/goods_list_page2.json', function (res) {
                                //将新数据拼接到原有数据之后
                                var new_data = that.goods_list.concat(res.data);
                                that.goods_list = new_data;

                                //tap_init()
                                //如果没有新数据了，则将has_more_data赋值为false
                                that.has_more_data = false;
                            })
                        }
                    },
				},
				mounted: function() {
					// page_init()
                    //初始化第一页数据
                    $.get(url + 'api/commtype/thrmenus', {bid: sqid,ptid:host_config.localStorage.ptid}, function (response) {
                        var responseData = JSON.parse(response);
                        if (responseData.code == '1') {
                            var menus = responseData.data;
                            for (menuItem in menus) {
                                var item = menus[menuItem];
                                if (menuItem == 0) {
                                    item.checked = true;
                                }else{
                                    item.checked = false;
                                }
                            }
                            var ptid = menus[0].ptid;
                            $.post(url + 'api/goods/lists', {bid: sqid,tid:host_config.localStorage.tid,ptid:ptid}, function (response) {
                                var responseData = JSON.parse(response);
                                if (responseData.code == '1') {
                                    var menus = responseData.data.goods;
                                    tab.wareGroup = menus;
                                }
                            });
                            tab.menusGroup = menus;
						}
                    });

                    console.log('页面加载');
                    var that = this;
                    // 初始化页面
                    mui.init({
                        pullRefresh: {
                            container: '#pullrefresh',
                            down: {
                                callback: pulldownRefresh
                            },
                            up: {
                                contentrefresh: '正在加载...',
                                callback: pullupRefresh
                            }
                        }
                    });
				}
			});
            mui(document).on('tap','a',function(){
                mui.openWindow(this.href,this.href)
            });


            function pulldownRefresh() {
                setTimeout(function () {
                    // list.get_data("/sim_data/goods_list.json", function (res) {
                    //     list.goods_list = res.data;
                    // })
                    console.log('下拉加载');
                    // list.has_more_data = true;
                    //获取数据成功过后将 列表重新渲染，完成后执行
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新完成
                }, 1000);
            }

            function pullupRefresh() {
                setTimeout(function () {
                    // 调用vue实例中的获取更多数据
                    //如果 has_more_data 为false 则表示没有数据了 则调用endPullupToRefresh
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。

                }, 1000);
            }
		</script>
	</body>

</html>